<template accountItem>
	<view :class="['list-item', !listItem.isAuth ? 'no-binding-wapper' : '']">
		<view class="no-binding flex col-center row-center" v-if="!listItem.isAuth" @tap="toDyFn">
			<text>此抖音账号未授权，去授权</text>
			<image src="/static/images/third/icon_sq_right@2x.png" class="to-binding" />
		</view>
		<view :class="['flex agent-info col-center', !listItem.isAuth ? 'is-auth-position' : '']">
			<view class="item-image"><image :src="listItem.dyPortrait || '/static/icon/default_dyhead.jpg'" /></view>
			<view class="item-content">
				<view class="agent-name">{{ listItem.nickName || '用户姓名' }}</view>
				<view class="agent-num" v-if="listItem.channelAccount">抖音号 ：{{ listItem.channelAccount }}</view>
			</view>
		</view>
		<view class="other-info flex row-between">
			<view class="set-one flex col-center" @click="setDefault(listItem)">
				<view class="set-one-image"></view>
				<image
					:src="
						selfIndex === currIndex
							? '/static/images/third/icon_choices_active@3x.png'
							: '/static/images/third/icon_choices_default@3x.png'
					"
				/>
				<text :class="['set-one-text', selfIndex === currIndex ? 'set-active' : '']">
					{{ selfIndex === currIndex ? '默认账号' : '设为默认' }}
				</text>
			</view>
			<view class="btn-box flex">
				<!-- 抖音号有修改，否则完善 -->
				<button class="common-btn cancle-btn" @click="cancalBindFn(listItem.id)">取消绑定</button>
				<button class="common-btn modify-btn" v-if="listItem.dyUrl" @click="bindInfo(listItem)">修改资料</button>
				<button class="common-btn compete-btn" v-else @click="bindInfo(listItem)">完善资料</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'accountItem',
	props: {
		listItem: {
			type: Object,
			default: () => {}
		},
		currIndex: {
			type: Number || String,
			default: -1
		},
		selfIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	methods: {
		setDefault(item = {}) {
			this.$emit('setDefaultFn');
		},
		// 修改
		modifyInfo(item = {}) {
			uni.navigateTo({
				url: '/thirdManage/editAccount'
			});
		},
		// 绑定
		bindInfo(item = {}) {
			const { id = '' } = item;
			if (!id) {
				uni.showToast({
					title: '无效ID',
					icon: 'none'
				});
				return;
			}
			uni.navigateTo({
				url: `/thirdManage/bindAccount?id=${id}`
			});
		},
		cancalBindFn() {
			this.$emit('cancalBindFn');
		},
		toDyFn() {
			this.$emit('toDyFn');
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.list-item {
	// padding: 24rpx 16rpx;
	background: #ffffff;
	border-radius: 24rpx;
	margin-bottom: 40rpx;
	transform: rotate(0deg);
	.no-binding {
		padding: 6rpx 30rpx 34rpx 30rpx;
		font-size: 24rpx;
		color: #ffffff;
		text-align: center;
		background: #ff6b11;
		.to-binding {
			width: 24rpx;
			height: 24rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.agent-info {
		margin-bottom: 20rpx;
		padding: 24rpx 16rpx 20rpx;
		border-radius: 24rpx 24rpx 0 0;
		background: #ffffff;
	}
	.is-auth-position {
		position: relative;
		top: -24rpx;
		z-index: 3;
		margin-bottom: 0;
	}
	.item-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 1;
		margin-right: 16rpx;
		border-radius: 50%;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.item-content {
		width: calc(100% - 116rpx);
		.agent-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 8rpx;
		}
		.agent-num {
			font-size: 24rpx;
			color: #999999;
		}
	}
	.other-info {
		padding: 0 16rpx 24rpx;
		.set-one {
			image {
				width: 40rpx;
				height: 40rpx;
			}
			&-text {
				font-size: 24rpx;
				color: #666666;
			}
			.set-active {
				color: #57ae59;
			}
		}
		.btn-box {
			.common-btn {
				min-width: 160rpx;
				width: auto;
				padding: 0 32rpx;
				height: 56rpx;
				border-radius: 28rpx;
				background: #ffffff;
				font-weight: bold;
				font-size: 24rpx;
				margin-right: 12rpx;
				line-height: 56rpx;
			}
			.cancle-btn {
				border: 1px solid #666666;
				color: #666666;
			}
			.modify-btn {
				border: 1px solid #f55f4e;
				color: #ff6b11;
			}
			.compete-btn {
				border: 1px solid #f55f4e;
				color: #f55f4e;
			}
		}
	}
}
.no-binding-wapper {
	border: 8rpx solid #ff6b11;
}
button::after {
	display: none;
	border: none;
}
</style>
